<template>
	<view class="page">
		<!-- 头部 start -->
		<view class="cu-custom text-white bg-top fixed" :style="[{ height: CustomBar+54 + 'px', }]">
			<view class="cu-bar bg-top " :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
				<view class=" width-120 "></view>
				<view class="text-lg">商品管理</view>
				<view class="   width-120"> </view>
			</view>
			<fu-filter-dropdown :top="CustomBar" @searchInfo="searchInfo" @changeFilter="changeFilter"
				:filterKeyword="keywords" ref="childMethod" :cid="cid"></fu-filter-dropdown>
		</view>
		<!-- 头部 end -->
		<!-- 筛选 -->
		<!-- loading组件 -->
		<view class="flex padding-tb align-center justify-around relative" :style="[{top:CustomBar+54+'px'}]">
			<view class="text-df" :class="selectIndex==0?'text-333 active':'text-999'" @tap='selectNav(0)'>出售中
				<text class="text-sm "> ({{goodsNum.sale_count||0}})</text>
			</view>
			<view class="text-df" :class="selectIndex==1?'text-333 active':'text-999'" @tap='selectNav(1)'>审核中
				<text class="text-sm "> ({{goodsNum.check_count||0}})</text>
			</view>
			<view class="text-df" :class="selectIndex==2?'text-333 active':'text-999'" @tap='selectNav(2)'>已下架
				<text class="text-sm "> ({{goodsNum.down_count||0}})</text>
			</view>
		</view>

		<view class="relative padding-tb" :style="[{top:CustomBar+54+'px'}]">
			<fu-loading v-if="isShowLoading"></fu-loading>
			<block v-else>
				<!--商品列表 start-->
				<view class="list padding-lr-24  padding-bottom-200 ">
					<view class=" w100">
						<view class="flex align-center margin-bottom-sm bg-white padding-sm radius-16"
							v-for="(item, index) in lists" :key="index">
							<!-- <view @tap="check(item, index)" class="margin-right-16" v-if="isEditor">
								<checkbox v-if="isEditor" class="round theme" :class="item.delChecked ? 'checked' : ''"
									:checked="item.delChecked ? true : false" style="transform: scale(0.7);"></checkbox>
								<checkbox v-if="!isEditor" class="round theme" :class="item.checked ? 'checked' : ''"
									:checked="item.checked ? true : false" :disabled="item.stock == 0 "
									style="transform: scale(0.7);">
								</checkbox>
							</view> -->
							<view class="w100">
								<view class="goods-info flex align-center " @tap="toDetail(item, index)">
									<view class=" relative margin-right-sm flex-shrink fu-block-200 radius-16 overHidden">
										<view class="box-kong padding-lr-16 padding-tb-4 text-white text-sm" v-if="item.port_name">
											{{item.port_name}}
										</view>
										<fu-image :src="item.thumb" mode="aspectFill"></fu-image>
									</view>
									<!-- is_check  0审核中 1通过 2拒绝 -->
									<view class="height-200 flex  justify-between flex-direction w80 relative">
										<!-- 审核中 -->
										<image src="/static/icon/ing.png" mode="aspectFill" v-if="selectIndex==1&&item.is_check==0"
											class="width-100 height-88 status-img"></image>
										<!-- 审核失败 -->
										<image src="/static/icon/err.png" mode="aspectFill" v-if="selectIndex==1&&item.is_check==2"
											class="width-100 height-88 status-img"></image>
										<view>
											<view class="text-df text-cut-2">{{ item.name }}
											</view>
											<view class="text-sm text-999 margin-top-sm sku_name">
												<view class=" ">
													<text>商品货号：{{ item.sn }}</text>
												</view>
											</view>
										</view>
										<view class="desc-number flex justify-between align-center">
											<view class="text-lg text-prices flex-shrink" @tap="toDetail(item, index)">
												<text class="text-price"></text>
												<text>{{ item | filterGoodsPrice }}</text>
											</view>
											<view class="text-sm text-999 text-cut"> 销量{{item.sales_sum||0}} </view>
											<view class="text-sm text-999 text-cut"> 库存{{item.stock||0}} </view>
										</view>
									</view>
								</view>
								<view class="flex align-center  padding-top "
									:class="selectIndex==2&&item.stock<=0?'justify-between':'justify-end'">
									<view class="text-red text-sm" v-if="selectIndex==2&&item.stock<=0"> 库存不足 </view>
									<!-- 入仓  run_type（1：入仓   2：非入仓）-->
									<view class=" padding-lr-40 text-sm height-50 line-height-50 radius-100 text-white bg-theme1 "
										@tap.stop='applyRepair(item,index)' v-if="userInfo&&userInfo.run_type==1&&selectIndex==0">申请补仓
									</view>
									<!-- 非入仓 -->
									<view class="flex align-center flex-wrap justify-end" v-if="userInfo&&userInfo.run_type==2">
										<view class="text-333 bg-f8 padding-lr text-sm height-50 line-height-50 radius-100 margin-right-sm"
											@tap.stop='lookEval(item,index)' v-if="selectIndex!=1">查看评价 </view>
										<view v-if="selectIndex==0"
											class="text-333 bg-f8 padding-lr-40 text-sm height-50 line-height-50 radius-100 margin-right-sm"
											@tap.stop='upDown(item,index)'>下架 </view>
										<view class=" padding-lr-40 text-sm height-50 line-height-50 radius-100"
											@tap.stop='openPop(item,index)' v-if="selectIndex!=1"
											:class="selectIndex==0?'text-white bg-theme1':'text-333 bg-f8'">库存 </view>
										<!-- 已下架 -->
										<view v-if="selectIndex==2"
											class="text-white bg-theme1 margin-left-sm padding-lr-40 text-sm height-50 line-height-50 radius-100"
											@tap.stop='openUp(item,index)'>上架 </view>
										<!-- <view
											class="text-white bg-theme1 margin-left-sm padding-lr text-sm height-50 line-height-50 radius-100"
											@tap.stop='addGoods(item,index)' v-if="selectIndex!=1">添加子商品 </view> -->
										<view
											class="text-white bg-theme1 margin-left-sm padding-lr  text-sm height-50 line-height-50 radius-100"
											@tap.stop='lookChild(item,index)' v-if="selectIndex!=1&& item.is_specifications==1">查看子商品 </view>
									</view>
								</view>
								<!-- 审核失败 -->
								<!-- is_check  0审核中 1通过 2拒绝 -->
								<view class="flex align-center  padding-top justify-end"
									v-if="selectIndex==1&&userInfo&&userInfo.run_type==2">
									<view v-if='item.is_check==2 '
										class="text-333 bg-f8 padding-lr-40 text-sm height-50 line-height-50 radius-100 margin-right-sm"
										@tap.stop='delItem(item,index)'>删除</view>
									<view v-if='item.is_check==2 '
										class="text-white bg-theme1 margin-left-sm padding-lr text-sm height-50 line-height-50 radius-100"
										@tap.stop='editItem(item,index)'>重新编辑 </view>
									<!-- <view
										class="text-white bg-theme1 margin-left-sm padding-lr text-sm height-50 line-height-50 radius-100"
										@tap.stop='addGoods(item,index)'>添加子商品 </view> -->
									<view class="text-333 bg-f8 margin-left-sm padding-lr  text-sm height-50 line-height-50 radius-100"
										@tap.stop='lookChild(item,index)' v-if="item.is_specifications==1">查看子商品 </view>
								</view>
							</view>
						</view>
					</view>
					<!-- 空布局 -->
					<fu-empty-ui v-if="lists.length == 0 && isInit"></fu-empty-ui>
					<!-- 加载状态 -->
					<uni-load-more v-if="lists.length > 5" :status="status"></uni-load-more>
				</view>
				<!-- 非入仓 -->
				<view class="action-bar padding-lr cu-bar  bg-white flex justify-end" v-if="userInfo&&userInfo.run_type==2">
					<view
						class=" radius-16 width-220 text-df text-center height-66 line-height-66 margin-right-sm line-theme text-white  "
						@click="manageCate">管理分类 </view>
					<view v-if="selectIndex!=1"
						class=" radius-16 width-220 text-df text-center height-66 line-height-66 line-theme margin-right-sm text-white  "
						@click="moreSet">批量管理 </view>
					<view class=" radius-16 width-220 text-df text-center height-66 line-height-66 bg-theme1 text-white text-df "
						@click="addGoods('')">添加商品 </view>
				</view>
				<!--商品列表 end-->
				<view v-if="userInfo&&userInfo.run_type==1&&selectIndex==0"
					class="applybox radius-100 text-center line-height-40 padding-tb-xs padding-lr-sm bg-theme text-white fu-block-106 text-sm"
					@tap='applyClick'>
					一键申请
				</view>
				<!-- 悬浮按钮 -->
				<!-- <fu-floor :type="type" :isShow="isShow" :pageNum="totalSize" :currentPage="currentPage"></fu-floor> -->
			</block>
		</view>
		<!-- 库存输入弹框 -->
		<fu-popup v-model="isShowStock" mode="center" border-radius="16" :mask-close-able="false">
			<view class="bg-white width-560">
				<view class="text-center padding text-lg text-333">商品库存</view>
				<view class="padding-lr padding-bottom">
					<view class="  text-df text-333">库存数量</view>
					<view class="bg-f8 radius-8 padding-sm text-df margin-top">
						<input type="number" maxlength="6" placeholder="请输入库存数量" v-model="stockIpt"
							placeholder-class="text-df text-999">
					</view>
					<view class="text-sm margin-top">供应总量:{{stockItem.sum_stock||0}} </view>
					<view class="text-sm margin-top-sm flex align-center justify-between">
						<text>剩余库存:{{stockItem.stock||0}} </text>
						<text>库存下限:{{stockItem.stock_warning||0}} </text>
					</view>
				</view>
				<view class="foot solid-top flex align-center justify-between height-100">
					<view class="flex-sub text-gray solid-right text-center" @click="isShowStock=false">取消</view>
					<view class="flex-sub text-theme text-center" @click="handleConfirm">确定</view>
				</view>
			</view>
		</fu-popup>
		<!-- 一键补仓弹框 -->
		<fu-popup v-model="isShowAdd" mode="center" border-radius="16" :mask-close-able="false">
			<view class="bg-white width-560">
				<view class="text-center padding text-lg text-333">一键补仓</view>
				<view class="padding-lr padding-bottom text-center">
					<view class="text-df margin-top-sm">已选{{totalNumber||0}}件商品</view>
					<view class="text-df margin-top-sm text-center ">
						<text>确认补仓至供应总量</text>
					</view>
				</view>
				<view class="foot solid-top flex align-center justify-between height-100">
					<view class="flex-sub text-gray solid-right text-center" @click="isShowStock=false">取消</view>
					<view class="flex-sub text-theme text-center" @click="handleConfirmAdd">确定</view>
				</view>
			</view>
		</fu-popup>
		<!-- 断网检测组件 -->
		<fu-notwork></fu-notwork>
	</view>
</template>
<script>
	// 基础筛选与高级筛选组件
	import fuFilterDropdown from '../../../goods/components/fu-filter-dropdown/fu-filter-dropdown.vue';
	// 楼层效果混入js
	import floor from '@/common/mixin/floor';
	// import fuFloor from '../../components/fu-floor/fu-floor.vue';
	export default {
		components: {
			fuFilterDropdown,
			// fuFloor
		},
		mixins: [floor],
		data() {
			return {
				timer: null, // 定时器
				isEditor: false, // 管理 or 完成
				type: 1, // 悬浮按钮状态 1 页码 2 返回顶部
				isShow: false, //是否显示按钮
				totalSize: 0, // 悬浮按钮总页码
				currentPage: 1, // 当前页页码
				isShowLoading: true, // 是否显示loading
				keywords: '', // 搜索的文本
				placeholder: global.i18n['请输入商品关键字'], // 默认文本
				model: 'block', // 布局样式
				lists: [], // 结果列表
				cid: '', // 分类id(点击分类跳转过来必传)
				isInit: false, // 是否请求过数据
				status: 'more', // 加载状态
				page: 1, // 页数
				size: 10, // 页条数
				sorts: '1', // 条件
				goodsNum: '', //商品数量统计
				advancedSearch: null, // 高级搜索对象
				isShowStock: false, //库存弹框
				isShowAdd: false, //补仓弹框
				stockIpt: '', //库存数量
				stockItem: '', //选择的库存
				selectIndex: '0', //分类索引
			};
		},
		computed: {
			// 用户信息
			userInfo() {
				return this.$store.getters.userInfo;
			},
			// 管理模式全选状态
			delAllChecked() {
				let list = this.lists;
				let bool = true;
				list.forEach(item => {
					// if(item.stock == 0) return ;
					if (item.delChecked == false) {
						bool = false;
					}
				});
				return bool;
			},
			// 正常模式全选状态
			allChecked() {
				let list = this.lists;
				let bool = true;
				list.forEach(item => {
					if (item.stock == 0) return;
					if (item.is_valid == 1) return;
					if (item.checked == false) {
						bool = false;
					}
				});
				return bool;
			},
			// 选择的商品数量
			totalNumber() {
				let list = this.lists;
				let total = 0;
				list.forEach(item => {
					if (item.checked == true) {
						total += Number(item.num);
					}
				});
				return total;
			},
		},

		onLoad(options) {
			/***
			 * @keyWords 关键词
			 * @cid 分类id
			 **/
			const {
				keyWords = '', cid = ''
			} = options;

			uni.$on('addGoodsSuccess', data => {
				this.page = 1
				this.status = 'more'
				this.handleSearch();
			})

		},
		onShow() {
			if (global.userInfo && global.userInfo.run_type == 1) {
				this.setTabBarItem1();
			} else { //非入仓
				this.setTabBarItem();
			}
			if (global.login) {
				this.$store.dispatch('getCartList');
			}
			this.getGoodsNum()
			this.page = 1
			this.status = 'more'
			this.handleSearch(); // 搜索方法
		},
		onReachBottom() {
			this.handleSearch(); // 搜索方法
		},
		onPullDownRefresh() {
			this.page = 1
			this.status = 'more'
			this.handleSearch();
			this.getGoodsNum()
		},
		methods: {
			/**
			 * @event
			 * @description 去商品详情
			 */
			navToDetail(item) {
				this.$urouter.navigateTo({
					url: '/pages/goods/goodsdetail/goods-detail/index',
					params: {
						sku_id: item.sku_id || 0,
						goods_id: item.id
					}
				});
			},
			//   商品统计数量
			getGoodsNum() {
				let data = {};
				if (this.advancedSearch) {
					data.goods_shop_category = this.advancedSearch.goods_shop_category; //分类id
					data.min_price = this.advancedSearch.min_price;
					data.max_price = this.advancedSearch.max_price;
					data.min_sale = this.advancedSearch.min_sale;
					data.max_sale = this.advancedSearch.max_sale;
					data.min_stock = this.advancedSearch.min_stock;
					data.max_stock = this.advancedSearch.max_stock;
				}
				// 判断关键字或者placeholder内容
				if (this.keywords.trim()) {
					data.keyword = this.keywords;
				}
				this.$api
					.post('/v1/63db80eed6d82', data)
					.then(res => {
						if (res.data.code == 1) {
							this.goodsNum = res.data.data
						} else {
							this.$message.error(res.data.msg);
						}
					})
					.catch(err => {
						this.isShowLoading = false;
					});
			},

			selectNav(e) {
				this.selectIndex = e
				this.page = 1
				this.status = 'more'
				this.handleSearch()
			},
			applyRepair(item) {
				this.$urouter.navigateTo({
					url: './applyRepair',
					params: {
						data: JSON.stringify(item)
					}
				});
			},
			lookChild(item) {
				this.$urouter.navigateTo({
					url: './child-goods-list',
					params: {
						id: item.id
					}
				});
			},
			// 入仓 一键申请
			applyClick() {
				this.$urouter.navigateTo({
					url: './repairList',
					params: {

					}
				});
			},
			searchInfo(e) {
				this.keywords = e
				this.page = 1;
				this.status = 'more';
				this.handleSearch();
				this.getGoodsNum()
			},
			/**
			 * @description 切换搜索条件
			 * @param {Object} type 条件
			 * @param {Object} order  排序 asc: 正序 desc: 倒序
			 * @param {Object} advancedSearch 高级搜索对象
			 */
			changeFilter(advancedSearch) {

				this.advancedSearch = advancedSearch
				this.page = 1;
				this.status = 'more';
				this.handleSearch();
				this.getGoodsNum()
				this.$nextTick(() => {
					// 切换条件回到底部
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0
					});
				});
			},
			// 管理分类
			manageCate() {
				uni.navigateTo({
					url: './cateManage'
				})
			},
			// 批量管理
			moreSet() {
				uni.navigateTo({
					// url: '/pages/tab/cart/cart-page/index',
					url: './moreSetting?selectIndex=' + this.selectIndex
				})
			},
			addGoods(item) {
				if (item) { //添加子商品
					this.$urouter.navigateTo({
						url: './addgoods',
						params: {
							"parent_goods_id": item.id,
						}
					})
				} else { //添加商品
					this.$urouter.navigateTo({
						url: './addgoods'
					})
				}

			},
			// 查看评价
			lookEval(item, index) {
				this.$urouter.navigateTo({
					url: '/pages/goods/goodsdetail/goods-comment/index',
					params: {
						"goods_id": item.id,
						pageType:'goods'
					}
				})
			},
			// 下架
			upDown(item, index) {
				this.$util.showModal({
					title: this.i18n['提示'],
					content: '确定要下架该商品吗?',
					confirmColor: this.$store.state.themeColor,
					success: (res) => {
						if (res.confirm) {
							this.$api.post('/v1/63dc7331c9770', {
									is_sale: 0, //上下架状态 0 下架 1上架
									id: item.id
								})
								.then(res => {
									if (res.data.code == 1) {
										this.page = 1;
										this.status = 'more';
										this.handleSearch();
										this.getGoodsNum()
									} else {
										this.$message.info(res.msg);
									}
								});
						}
					}
				})
			},
			// 上架
			openUp(item) {
				this.$util.showModal({
					title: this.i18n['提示'],
					content: '确定要上架该商品吗?',
					confirmColor: this.$store.state.themeColor,
					success: (res) => {
						if (res.confirm) {
							this.$api.post('/v1/63dc7331c9770', {
									is_sale: 1, //上下架状态 0 下架 1上架
									id: item.id
								})
								.then(res => {
									if (res.data.code == 1) {
										this.page = 1;
										this.status = 'more';
										this.handleSearch();
										this.getGoodsNum()
									} else {
										this.$message.info(res.msg);
									}
								});
						}
					}
				})
			},
			delItem(item) {
				this.$util.showModal({
					title: this.i18n['提示'],
					content: '确定要删除该商品吗?',
					confirmColor: this.$store.state.themeColor,
					success: (res) => {
						if (res.confirm) {
							this.$api.post('/v1/63dc72b9dfed0', {
									id: item.id
								})
								.then(res => {
									if (res.data.code == 1) {
										this.page = 1;
										this.status = 'more';
										this.handleSearch();
										this.getGoodsNum()
									} else {
										this.$message.info(res.msg);
									}
								});
						}
					}
				})
			},
			// 编辑
			editItem(item, index) {
				this.$urouter.navigateTo({
					url: './addgoods',
					params: {
						"goods_id": item.id,
						pageType: 'editGoods'
					}
				})
			},

			// 商品选中状态处理
			check(item, i) {
				if (this.isEditor) {
					item.delChecked = !item.delChecked;
				} else {
					if (item.stock == 0) return this.$message.info(this.i18n['该商品已售完,正在采购中']);
					if (item.is_valid == 1) return this.$message.info(this.i18n['该商品已下架']);
					this.lists[i].checked = !this.lists[i].checked;
					this.cacheCartChecked();
				}
			},
			checkfor() {
				//选中状态，页面关闭的时候全部为false
				let _type = false;
				this.lists.forEach(item => {
					item.checked == false;
					item.delChecked == false;
				});
				this.allChecked = false;
				this.delAllChecked = false;
			},
			//全选|取消全选
			checkAll() {
				if (this.isEditor) {
					const bool = !this.delAllChecked;
					console.log('isEditor', bool)
					this.lists.forEach(item => {
						item.delChecked = bool;
					});
				} else {
					const bool = !this.allChecked;
					console.log('unEditor', bool)
					this.lists.forEach(item => {
						if (item.is_valid == 0 && item.stock != 0) {
							item.checked = bool;
						}
					});
				}
			},
			openPop(item, index) {
				this.isShowStock = true
				this.stockItem = item
			},
			toDetail(item, index) {
				this.$urouter.navigateTo({
					url: '/pages/goods/goodsdetail/goods-detail/index',
					params: {
						"id": item.id,
						pageType: this.selectIndex == 1 ? 'reviewIng' : this.selectIndex == 0 ? 'upIng' : 'downIng'
					}
				})
			},
			// 确定输入库存弹框
			handleConfirm() {
				if (this.stockIpt <= 0) {
					return this.$message.info('库存不能小于0')
				}
				this.$api
					.post('/v1/63dc9fe330638', {
						goods_id: this.stockItem.id,
						stock: this.stockIpt
					})
					.then(res => {
						if (res.data.code == 1) {
							this.page = 1;
							this.status = 'more';
							this.handleSearch();
						} else {
							this.$message.error(res.data.msg);
						}
					})
					.catch(err => {
						this.isShowLoading = false;
					});

				this.isShowStock = false
			},
			// 一键补仓
			handleConfirmAdd() {
				this.isShowAdd = false
			},
			confirmAdd() {
				if (this.totalNumber <= 0) {
					return this.$message.info('请选择补仓商品')
				}
				this.isShowAdd = true
			},

			/**
			 * @func 搜索
			 */
			handleSearch() {
				if (this.status != 'more') return;
				this.status = 'loading';
				let data = {
					type: this.selectIndex == 0 ? 'sale' : this.selectIndex == 1 ? 'check' :
					'down', //类型  sale：出售中 check：审核中 down：已下架				
					page: this.page,
					list_rows: this.size,
				};
				console.log(this.advancedSearch, 'this.advancedSearch');
				//判断是否有高级搜索
				if (this.advancedSearch) {
					data.goods_shop_category = this.advancedSearch.goods_shop_category; //分类id
					data.min_price = this.advancedSearch.min_price;
					data.max_price = this.advancedSearch.max_price;
					data.min_sale = this.advancedSearch.min_sale;
					data.max_sale = this.advancedSearch.max_sale;
					data.min_stock = this.advancedSearch.min_stock;
					data.max_stock = this.advancedSearch.max_stock;
				}
				// 判断关键字或者placeholder内容
				if (this.keywords.trim()) {
					data.keyword = this.keywords;
				}
				if (this.page == 1) {
					this.isShowLoading = true;
				}
				// 获取商品列表接口
				this.$api
					.post('/v1/63db775cd4a5a', data)
					.then(res => {
						this.isShowLoading = false;
						if (res.data.code == 1) {
							let totalSize = res.data.data.total;
							this.totalSize = Math.ceil(totalSize / 10); // 悬浮按钮总页码
							this.currentPage = this.page; //悬浮当前页面
							let list = res.data.data.data;
							if (this.page == 1) this.lists = [];
							this.lists = this.lists.concat(list);
							this.lists.forEach(item => {
								item.show = false;
								item.checked = false;
								item.delChecked = false;
							});
							if (this.lists.length >= totalSize) {
								this.status = 'noMore';
							} else {
								this.status = 'more';
								this.page++;
							}
							this.isInit = true;
						} else {
							this.$message.error(res.data.msg);
						}
					})
					.catch(err => {
						this.isShowLoading = false;
					});
			},
			// 返回
			back() {
				uni.navigateBack();
			},
			/**
			 * @description 增加一条搜索历史记录
			 * @param {Object} value 关键词
			 */
			addHistory(value) {
				if (!value) return;
				let _history = uni.getStorageSync('SEARCHHISTORY');
				if (!_history) {
					_history = [];
				}
				_history.unshift(value);
				let history = [...new Set(_history)];
				uni.setStorageSync('SEARCHHISTORY', history);
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.bg-top {
		background: linear-gradient(90deg, #FFBE65 0%, #F97F33 100%);
	}

	.fixed {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;
	}

	.page {
		min-height: 100%;
		/* background-color: #ffffff; */
	}

	.head-top {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	.nav-bar-wrap {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	.sort-wrap {
		position: fixed;
		left: 0;
		right: 0;
	}

	.height-100 {
		height: 100rpx;
	}

	.block-180 {
		width: 180rpx;
		min-width: 180rpx;
		height: 180rpx;
		min-height: 180rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}

		.null {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			border-radius: 8rpx;
			background-color: rgba(0, 0, 0, 0.45);
			color: #ffffff;
			font-size: 36rpx;
			text-align: center;
			line-height: 180rpx;
		}
	}

	.list-item+.list-item {
		border-top: 1rpx solid #eeeeee;
	}

	.overlay-animate {
		position: fixed;
	}

	.float-action {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		// background-color: rgba(165, 165, 165, .85);
		position: fixed;
		right: 20rpx;
		bottom: 280rpx;
		z-index: 996;
		border: 1rpx solid #cccccc;

		.cuIcon-cart {
			color: #cccccc;
		}
	}

	.animate {
		position: fixed;
		border-radius: 50%;
		z-index: 995;
		transform-origin: 50% 50%;
		transition: transform linear 0.5s, left linear 0.5s, top cubic-bezier(0.3, -0.2, 1, 0) 0.5s !important;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}

	// 商品卡片line
	.fu-goods-line {
		/* min-height: 570rpx; */
		padding: 24rpx 0;
		border-radius: 24rpx;
		/* background-color: #ffffff; */
		// margin-top: 20rpx;
		display: flex;

		.block-246 {
			padding: 24rpx 24rpx 0;

			.img {
				width: 172rpx;
				height: 172rpx;
				border-radius: 6rpx;
				background-color: #eeeeee;
			}
		}

		.content {
			flex: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}

	// 商品卡片block
	.fu-goods-block {
		overflow: hidden;
		margin-bottom: 20rpx;
		padding: 0 10rpx;

		.wrap-box {
			background-color: #ffffff;
			border-radius: 16rpx;

			.square-wrap {
				width: 100%;
				height: 0;
				padding-bottom: 100%;
				box-sizing: border-box;
				position: relative;

				.square-box {
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					border-radius: 24rpx 24rpx 0 0;

					image {
						width: 100%;
						height: 100%;
						border-radius: 24rpx 24rpx 0 0;
					}
				}
			}

			.image {
				width: 100%;
				border-radius: 24rpx 24rpx 0 0;
			}
		}

		.content {
			padding: 20rpx;
		}
	}

	.item-activity-label {
		padding: 2rpx 5rpx;
		/* margin: 5rpx; */
		font-size: 24rpx;
		border-radius: 6rpx;
		border: 1px solid;
		margin: 0rpx 1px 0px;
		display: inline-block;
		transform: scale(0.8);
	}

	.padding-lr-24 {
		padding: 0 24rpx;
	}

	.padding-lr-4 {
		padding: 0 4rpx;
	}

	.search-form {
		margin-left: 12rpx;
	}

	.item-goods-label {
		padding: 2rpx 8rpx;
		color: #ff6464;
		font-size: 24rpx;
		margin-right: 6rpx;
		background: rgba(255, 100, 100, 0.1);
		/* opacity: 0.1; */
		border-radius: 4rpx;
	}

	.item-activity-label {
		padding: 0 8rpx;
		height: 32rpx;
		line-height: 30rpx;
		border: 1px solid #fa2033;
		opacity: 1;
		border-radius: 4rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #fa2033;
		margin-right: 16rpx;

		&:nth-of-type(1) {
			border: 1px solid #0a7ce6;
			color: #0a7ce6;
		}
	}

	.sales-number {
		margin-top: 16rpx;
	}

	.through-price {
		margin-left: 16rpx;
		color: #bfbfbf;
	}

	.box-kong {
		position: absolute;
		border-radius: 16rpx 0 16rpx 0;
		left: 0;
		top: 0;
		z-index: 99;
		background: rgba(0, 0, 0, 0.6);
	}

	.action-bar {
		position: fixed;
		// #ifdef H5
		bottom: 50px !important;
		// #endif
		// #ifndef H5
		bottom: 0 !important;
		// #endif
		width: 100%;
		z-index: 999;
	}

	.active {
		position: relative;
	}

	.active::after {
		position: absolute;
		content: '';
		left: 0;
		right: 0;
		margin: auto;
		width: 48rpx;
		height: 4rpx;
		bottom: -10rpx;
		background: $bgtheme1;
		border-radius: 16rpx;
	}

	.status-img {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 100;
	}

	.applybox {
		position: fixed;
		right: 30rpx;
		bottom: 20%;
		z-index: 266;
		word-wrap: break-word;
	}
</style>